<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="何毓堂">
    <title></title>
    <link rel="stylesheet" type="" href="">
    <style>
        * {
            box-sizing: border-box;
        }  

        .external {
            width: 400px;
            height: 500px;
            /* border: 2px solid red; */
            margin: 0 auto;
        }

        section {
            width: 300px;
            height: 400px;
            background-color: #eee;
            margin: 0 auto;
        }

        .details {
            width: 270px;
            height: 250px;
            /* border: 1px solid violet; */
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        .details div {
            width: 53px;
            height: 53px;
            /* border: 1px solid blue; */
            margin: 7px;
            text-align: center;
            background-color: black;
            color: #fff;
            font-size: 18px;
        }

        .festival {
            width: 270px;
            height: 100px;
            /* background-color: red; */
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="external">
        <section>
            <div class="details">
                <div class="one">
                    1
                    <br> JUN
                </div>
                <div class="two">
                    2<br> FEB
                </div>
                <div class="three">
                    3<br> MAR
                </div>
                <div class="four">
                    4<br> APR
                </div>
                <div class="five">
                    5 <br> MAY
                </div>
                <div class="six">
                    6 <br> JAN
                </div>
                <div class="seven">
                    7<br> JUL
                </div>
                <div class="eight">
                    8 <br> AGU
                </div>
                <div class="nine">
                    9 <br> SEP
                </div>
                <div class="ten">
                    10 <br> OCT
                </div>
                <div class="eleven">
                    11 <br> NOV
                </div>
                <div class="twelve">
                    12<br> SEC
                </div>
            </div>
            <div class="festival"></div>
        </section>
    </div>
</body>

</html>
<script>
    var one = document.querySelector('.one');
    var two = document.querySelector('.two');
    var three = document.querySelector('.three');
    var four = document.querySelector('.four');
    var five = document.querySelector('.five');
    var six = document.querySelector('.six');
    var seven = document.querySelector('.seven');
    var eight = document.querySelector('.eight');
    var nine = document.querySelector('.nine');
    var ten = document.querySelector('.ten');
    var eleven = document.querySelector('.eleven');
    var twelve = document.querySelector('.twelve');
    var festival = document.querySelector('.festival');
    var festiva = [
        "元旦：1月1日至3日放假三天。",
        "春节：2月2日至8日放假7天。",
        "妇女节：3月8日妇女节，与我无关。",
        "清明节：4月3日至5日放假3天",
        "劳动节：4月30日至5月2日放假3天。",
        "端午节：6月4日至6日放假3天。",
        "小暑：7月7日小暑。不放假。",
        "七夕节：8月6日七夕节。不放假。",
        "中秋节：9月10日至12日放假3天。",
        "国庆节：10月1日至7日放假7天。",
        "立冬：11月8日立冬。不放假。",
        "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"
    ];
    one.onmouseenter = function () {
        one.style.color = 'violet';
        one.style.backgroundColor = '#fff';
        one.style.border = '1px solid black';
        festival.innerHTML = festiva[0];
    }
    one.onmouseout = function () {
        one.style.backgroundColor = 'black';
        one.style.color = '#fff';

    }
    two.onmouseenter = function () {
        two.style.color = 'violet';
        two.style.backgroundColor = '#fff';
        two.style.border = '1px solid black'
        festival.innerHTML = festiva[1];
    }
    two.onmouseout = function () {
        two.style.backgroundColor = 'black';
        two.style.color = '#fff';
    }
    three.onmouseenter = function () {
        three.style.color = 'violet';
        three.style.backgroundColor = '#fff';
        three.style.border = '1px solid black'
        festival.innerHTML = festiva[2];
    }
    three.onmouseout = function () {
        three.style.backgroundColor = 'black';
        three.style.color = '#fff';
    }
    four.onmouseenter = function () {
        four.style.color = 'violet';
        four.style.backgroundColor = '#fff';
        four.style.border = '1px solid black';
        festival.innerHTML = festiva[3];
    }
    four.onmouseout = function () {
        four.style.backgroundColor = 'black';
        four.style.color = '#fff';
    }
    five.onmouseenter = function () {
        five.style.color = 'violet';
        five.style.backgroundColor = '#fff';
        five.style.border = '1px solid black';
        festival.innerHTML = festiva[4];
    }
    five.onmouseout = function () {
        five.style.backgroundColor = 'black';
        five.style.color = '#fff';
    }
    six.onmouseenter = function () {
        six.style.color = 'violet';
        six.style.backgroundColor = '#fff';
        six.style.border = '1px solid black';
        festival.innerHTML = festiva[5];
    }
    six.onmouseout = function () {
        six.style.backgroundColor = 'black';
        six.style.color = '#fff';

    }
    seven.onmouseenter = function () {
        seven.style.color = 'violet';
        seven.style.backgroundColor = '#fff';
        seven.style.border = '1px solid black';
        festival.innerHTML = festiva[6];
    }
    seven.onmouseout = function () {
        seven.style.backgroundColor = 'black';
        seven.style.color = '#fff';
    }
    eight.onmouseenter = function () {
        eight.style.color = 'violet';
        eight.style.backgroundColor = '#fff';
        eight.style.border = '1px solid black';
        festival.innerHTML = festiva[7];
    }
    eight.onmouseout = function () {
        eight.style.backgroundColor = 'black';
        eight.style.color = '#fff';
    }
    nine.onmouseenter = function () {
        nine.style.color = 'violet';
        nine.style.backgroundColor = '#fff';
        nine.style.border = '1px solid black';
        festival.innerHTML = festiva[8];
    }
    nine.onmouseout = function () {
        nine.style.backgroundColor = 'black';
        nine.style.color = '#fff';
    }
    ten.onmouseenter = function () {
        ten.style.color = 'violet';
        ten.style.backgroundColor = '#fff';
        ten.style.border = '1px solid black';
        festival.innerHTML = festiva[9];
    }
    ten.onmouseout = function () {
        ten.style.backgroundColor = 'black';
        ten.style.color = '#fff';
    }
    eleven.onmouseenter = function () {
        eleven.style.color = 'violet';
        eleven.style.backgroundColor = '#fff';
        eleven.style.border = '1px solid black';
        festival.innerHTML = festiva[10];
    }
    eleven.onmouseout = function () {
        eleven.style.backgroundColor = 'black';
        eleven.style.color = '#fff';
    }
    twelve.onmouseenter = function () {
        twelve.style.color = 'violet';
        twelve.style.backgroundColor = '#fff';
        twelve.style.border = '1px solid black';
        festival.innerHTML = festiva[11];
    }
    twelve.onmouseout = function () {
        twelve.style.backgroundColor = 'black';
        twelve.style.color = '#fff';
    }
</script>